<!-- 首页 -->

<template>
  <div class="page-index">
    <div class="top">
      <RouterView v-slot="{ Component }">
        <KeepAlive :include="includes">
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </div>

    <van-tabbar class="bottom" v-model="active">
      <van-tabbar-item
        v-for="item in items"
        :key="item.name"
        :name="item.name"
        :to="{ name: item.name }"
      >
        {{ item.text }}
        <template #icon="{ active }">
          <img :src="active ? item.iconAct : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

import iconFilms from '../assets/icon-films.png'
import iconFilmsActive from '../assets/icon-films__active.png'
import iconCinemas from '../assets/icon-cinemas.png'
import iconCinemasActive from '../assets/icon-cinemas__active.png'
import iconActive from '../assets/icon-active.png'
import iconActiveActive from '../assets/icon-active__active.png'
import iconCenter from '../assets/icon-center.png'
import iconCenterActive from '../assets/icon-center__active.png'

const items = [
  {
    text: '电影',
    name: 'films',
    icon: iconFilms,
    iconAct: iconFilmsActive
  },
  {
    text: '影院',
    name: 'cinemas',
    icon: iconCinemas,
    iconAct: iconCinemasActive
  },
  {
    text: '资讯',
    name: 'active',
    icon: iconActive,
    iconAct: iconActiveActive
  },
  {
    text: '我的',
    name: 'center',
    icon: iconCenter,
    iconAct: iconCenterActive
  }
]

const route = useRoute()
const router = useRouter()

const active = ref(route.name as string)

// 计算 includes
const includes = router
  .getRoutes()
  .filter((route) => route.meta.keepAlive)
  .map((item) => item.name!) as string[]
</script>

<style scoped>
.page-index {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.top {
  flex: 1;
  overflow: hidden;
}

.bottom {
  display: flex;
  margin: 0;
  padding: 0;
  height: 50px;
  list-style: none;
  overflow: hidden;
  border-top: 1px solid #000;
}

.bottom li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
</style>
